<template>
    <Layout title="采购列表" showHome showNew>
        <div class="pur-box">
            <nav>
                <van-dropdown-menu class="pur-select">
                    <van-dropdown-item v-model="query.state" :options="stateList">
                    </van-dropdown-item>
                </van-dropdown-menu>
                <input type="text" v-model="query.projectName" placeholder="输入项目名进行查询">
                <button class="btn" @click="searchEvt">查询</button>
            </nav>
            <article @scroll="scrollEvt">
                <div class="all-box" v-for="it in list" :key="it.id">
                    <van-swipe-cell class="van-swipe">
                        <template #left>
                            <van-button @click="detailsEvt" style="height: 100%;" square type="primary" text="详情" />
                        </template>
                        <div class="all-content">
                            <div class="title">
                                <span>{{ it.projectName }}</span>
                                <button style="border:1px solid #ed7b2f ">{{ it.state }}</button>
                            </div>
                            <div class="messages">
                                <div class="info">创建人:{{ it.createName }}</div>
                                <div class="info">创建日期:{{ it.createTime }}</div>
                                <div class="info">材料:{{ it.materialTime }}</div>
                            </div>
                        </div>
                        <template #right>
                            <van-button v-if="it.state === '新建'" style="height: 100%;"  type="danger" text="删除"
                                @click="deleteEvt(it.id)" />
                            <van-button v-if="it.state === '新建'"
                                style="height: 100%; background-color: royalblue; color: white;" @click="editEvt" square
                                text="编辑" />
                            <van-button v-if="it.state === '新建'" style="height: 100%;" square @click="approveEvt(it)"
                                type="primary" text="确认" />
                            <van-button v-if="it.state === '确认'"
                                style="height: 100% ; background: rgb(181, 0, 212); color: white;"
                                @click="approveEvt(it)" square text="在途" />
                            <van-button v-if="it.state === '在途'" style="height: 100%;" @click="approveEvt(it)" square
                                type="success" text="完成" />
                            <van-button v-if="it.state === '完成'" style="height: 100%;" square type="primary"
                                text="付款" />
                        </template>
                    </van-swipe-cell>
                </div>
                <div class="loading-text" v-if="loading">
                    <van-loading />
                </div>
                <div class="loading-text" v-else :key="hasMore">
                    {{
                            hasMore ? '上拉加载更多数据' : '没有更多数据'
                    }}
                </div>
            </article>
        </div>

        <van-popup v-model:show="show" round position="bottom" :style="{ height: '300px' }">
            <van-form @submit="submitEvt">
                <van-cell-group inset>
                    <van-steps :active="active" active-color="#ffa940">
                        <van-step>新建</van-step>
                        <van-step>确认</van-step>
                        <van-step>在途</van-step>
                        <van-step>完成</van-step>
                    </van-steps>
                    <van-field v-model="submitObj.userName" name="userName" label="审批人" readonly />
                    <van-field name="radio" label="审批意见">
                        <template #input>
                            <van-radio-group v-model="submitObj.isReject" direction="horizontal">
                                <van-radio :name="true">驳回</van-radio>
                                <van-radio :name="false">同意</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                    <van-field v-model="submitObj.remark" name="remark" label="备注" placeholder="输入备注信息"
                        :rules="[{ required: true, message: '请输入备注信息' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>
        </van-popup>
    </Layout>
</template>
<script setup>
import { showSuccessToast, showFailToast } from 'vant'

import { getCurrentInstance, ref, onMounted, reactive } from 'vue'
import { useRouter } from "vue-router";
import { purchaseDeleteApi, purchaseFlowApi, purchaseListApi } from '../../apis/purchaseApi'
import { commonDefinition } from '../../store'
const userRights = commonDefinition().getUserRights
const userInfo = commonDefinition().getUserInfo

const list = ref([])
let _router = useRouter()
const _this = getCurrentInstance()
const loading = ref(true)
const hasMore = ref(true)
const query = reactive({
    projectName: '',
    state: '',
    page: 1,
    size: 20
})
const stateList = [
    { text: '全部', value: '' }, //新建、确认、在途、完成、作废
    ...'新建、确认、在途、完成、作废'.split('、').map(it => ({ text: it, value: it }))
]
const show = ref(false)
const submitObj = reactive({
    id: '',
    isReject: false,
    userId: userInfo.id,
    userName: userInfo.name,
    remark: ''
})
const active = ref(0)

function submitEvt() {
    purchaseFlowApi(submitObj).then(d => {
        if (d.code === 200) {
            showSuccessToast('提交成功')
            // 重置数据，为什么不重新发出请求--app端的话有可能是第几页中一条数据更新，发请求，请求哪页数据
            show.value = false
            list.value.forEach(it => {
                if (it.id === submitObj.id) {
                    it.state = it.state === '新建' ? '确认' : it.state === '确认' ? '在途' : '完成'
                }
            })
        } else {
            showFailToast('失败')
        }
    })
}
function approveEvt(it) {
    // 设置进度条的进度
    active.value = it.state === '新建' ? 1 : it.state === '确认' ? 2 : 3
    // 给提交对象绑定id数据
    submitObj.id = it.id
    submitObj.remark = ''
    show.value = true
}


onMounted(function () {
    getPurchaseList()
})
async function getPurchaseList() {
    let result = await purchaseListApi(query)
    console.log(result)
    if (result.code === 200) {
        result.data.rows.forEach(it => {
            list.value.push({ ...it, createTime: (it.createTime || '').substring(0, 10) })
        })
        hasMore.value = query.page * query.size < result.data.total
    }
    setTimeout(function () {
        loading.value = false
    })
}
function scrollEvt(evt) {
    let isBottom = evt.target.scrollHeight < (evt.target.clientHeight + evt.target.scrollTop + 40)
    if (isBottom && !loading.value) {
        loading.value = true
        query.page += 1
        getPurchaseList()
    }
}
// 查询
function searchEvt() {
    // debugger
    if (loading.value) return
    query.page = 1
    loading.value = true
    list.value = []
    getPurchaseList()
}
function editEvt() {
    _router.push('/purchase/edit')
}
function detailsEvt() {
    _router.push('/purchase/details')
}

async function deleteEvt(id) {
    let deleteId = await purchaseDeleteApi(id)
    if (deleteId.code === 200) {
        showSuccessToast('删除成功')
        // getPurchaseList()
    } else {
        showFailToast('失败')
    }
}

</script>
<style lang="less" scoped>
@import url('../../style/common.less');

.loading-text {
    display: block;
    text-align: center;
    // padding-left: 200px;

    color: @g05;
    font-size: .7rem;
    line-height: 36px;
}

.pur-box {
    display: block;
    position: relative;
    height: 100%;
    padding-left: 10px;
    padding-right: 10px;


    >nav {
        display: flex;
        height: 48px;
        background: @g00;
        padding-right: 10px;
        margin-bottom: 10px;


        >input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: 16px;
            padding-left: 10px;

        }

        >.btn {
            flex:0 0 40px;
            height: 30px;
            list-style: none;
            background: @b03;
            border: none;
            color: @g00;
            font-size: 14px;
            margin-top: 8px;
            line-height: 30px;
            text-align: center;
            border-radius: 3px;
        }
    }

    >article {
        >.all-box {
            background: @g00;
            overflow: hidden;
            border-radius: 5px;
            margin-top: 10px;
            // width: 394px;
            height: 150px;
            border-bottom: 1px solid @g04;
            border-top: 1px solid @g04;


            >.van-swipe {
                >.van-swipe-cell__wrapper {

                    >.all-content {
                        margin: 15px;

                        >.title {
                            height: 40px;
                            padding-bottom: 10px;
                            border-bottom: 1px solid @g05;
                            margin-bottom: 10px;

                            >span {
                                font-size: 0.9rem;
                                padding-top: 10px;
                                padding-bottom: 10px;

                                font-weight: 800;
                            }

                            >button {
                                float: right;
                                list-style: none;
                                background: white;
                                border-radius: 5px;
                                font-size: 0.8rem;

                            }
                        }

                        >.messages {
                            color: @g05;
                            margin-top: 10px;

                            >.info {
                                color: @g06;
                                font-size: 0.9rem;
                            }
                        }
                    }
                }
            }
        }
    }

    #van-field-5-label {
        width: 50px;
    }

}
</style>
